<template>
    <div class="list">
        <!-- 头部功能栏 -->
        <header>
            <div class="box">
                <Input
                    v-model.trim="params.uId"
                    placeholder="请输入公众号名称查询"
                    clearable
                />
            </div> 
            <div>
                <Button type="primary" icon="ios-search" @click="search"></Button>
            </div>                 
        </header>
        <!-- 列表 -->
        <div class="table">
            <Table size="small" :columns="columns1" :data="data1" stripe></Table>
        </div>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store";
export default {
    data() {
        return {
            params: {
                uId: ""
            },
            pageNo: 1,
            pageSize: 10,
            count: 10,
            columns1: [
                { title: "排序", key: "sum", align: "center", width: 100,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                { title: "公众号", key: "nick", align: "center"},
                { title: "Appid", key: "appid", align: "center", },
                { title: "密钥", key: "appsecret", align: "center",},
                {
                    title: "设置",
                    key: "iOperate",
                    align: "center",
                    width: 120,
                    render: (h, params) => {
                        let id = params.row.appid;
                        let nick = params.row.nick;
                        return [
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {                                    
                                            // FunctionJS方法
                                            this.functionJS.paramsNavgationTo(
                                                this,"WXMenuPCinstall",
                                            );
                                            let iv = store.state.iv;
                                            let salt = store.state.salt;
                                            localStorage.setItem("nick",params.row.nick)
                                            localStorage.setItem("id",params.row.id)
                                            localStorage.setItem(
                                                "appid",
                                                aesUtils.encrypt(
                                                    salt,
                                                    iv,
                                                    "wxAppid",
                                                    id
                                                )
                                            );
                                        }
                                    }
                                },
                                "设置"
                            )
                        ];
                    }
                }
            ],
            data1: [],
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/publicOperation/publicAddress/home",
                title: "公众号托管"
            },
            {
                path: "/index/publicOperation/publicAddress/home",
                title: "公众号运营"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        this.loadingData(1);
    },
    methods: {
        loadPage(index) {
            this.pageNo = index;
            this.loadingData(index);
        },
        search() {
            this.loadingData(1, this.params.uId);
        },
        loadingData(pageNo, val) {
            let params = {
                pageNo,
                pageSize: this.pageSize
            };            
            if (Boolean(val)) {
                params.searchKey = val.trim();
            }
            this.$axios.post(api.findWxappList, params).then(res => {
                if (res.data.code) {
                    let ret = res.data.object.records;
                    if(ret){
                        ret.forEach((item, index) => {
                            item.sum = index + 1;
                        });
                        this.count = res.data.object.total;
                        this.data1 = ret;
                    } else {
                        this.data1 = []
                    }
                    
                } else {
                    this.$Message.info("没有访问权限");
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.list {
    width: 100%;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    header {
        width: 100%;
        display: flex;
        margin: 10px 0;
        .box{
            margin-right: 10px;
            width: 200px;
        }
    }
    .page{
        text-align: center;
        margin: 20px 0;
    }
}
.inputbox{
   width:300px;
}
.buttonbox{
    width: 350px;
    text-align: center;
}
.icon{
    margin-right: 5px;
    font-size: 14px;
}
.btn{
    margin-left: 10px;
}
</style>
